<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}00</text>
		</view>
		<u-picker :show="show" v-model="selectdIndex" :defaultIndex="selectdIndex" ref="uPicker" keyName="label" :closeOnClickOverlay="true" @close="onClose"
			@cancel="onClose" @confirm="onSelect" :columns="columns" @change="changeHandler"></u-picker>
		<u-button @click="show=true">12</u-button>
		<!-- <tabbar /> -->
	</view>
</template>

<script>
	import tabbar from '../../compennts/tabbar/index.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				title: 'Hello',
				show: false,
				selectdIndex:[0,0],
				columns: [
					[],
					[]
				],

			}
		},
		onLoad() {
			const years = this.getYears(2020)
			const months = this.getMounths(2024)
			this.$nextTick(()=>{
				this.$refs.uPicker.setColumnValues(0, years)
				this.$refs.uPicker.setColumnValues(1, months)
				this.selectdIndex = this.getDefaultVal(years,months)
			})
		},
		methods: {
			getYears(beginYear=2024){
				const date = new Date()
				const currentYear = date.getFullYear()
				let years = []
				for(let y = beginYear;y<=currentYear;y++){
					years.push({
						label:y+'年',
						value:y
					})
				}
				return years
			},
			getMounths(year=2024){
				let months = []
				let currentYear = new Date().getFullYear()
				let monthLen = 12 
				if(year == currentYear){
					monthLen = new Date().getMonth() + 1
				}
				for(let i = 1;i <= monthLen;i++){
					months.push({
						label:i+'月',
						value:i
					})
				}				
				return months
			},
			getDefaultVal(years=[],months=[]){
				const currentYear = new Date().getFullYear()
				const currentMonthIdx = new Date().getMonth()
				let res = [0,0]
				for(let i=0;i<years.length;i++){
					if(currentYear == years[i].value){
						res[0] = i
						break
					}
				}
				res[1] = months[currentMonthIdx]?.value || 0
				console.log(res)
				return res
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e
				if(columnIndex != 0) return
				let year = values[0][index].value
				const months = this.getMounths(year)
				picker.setColumnValues(1, months)
			},
			// 回调参数为包含columnIndex、value、values
			onSelect(e) {
				console.log('confirm', e)
				this.show = false
			},
			onClose() {
				console.log('ppp')
				this.show = false
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>